<template>
  <div class="app-container">
	<div class="rol-cent">
	<div class="rol-left">
		<el-dialog
		  :title="titles"
		  :visible.sync="isshow"
		  :close-on-click-modal=false
		  width="400px"
		  >
		 <el-form :model="json" :rules="rules" ref="json" label-width="100px" class="demo-ruleForm">
			  <el-form-item label="角色名称" prop="roleName">
			    <el-input v-model="json.roleName" size="mini"></el-input>
			  </el-form-item>
			  <el-form-item label="备注">
			    <el-input v-model="json.remark" size="mini"></el-input>
			  </el-form-item>
			   <div class="subbtn">
			    <el-button type="primary" @click="addbtn('json')">确 定</el-button>
			  </div>
		 </el-form>
		</el-dialog>
		<div class="rol-left-list">
			<ul>
				<li class="rol-left-one rol-num">
					<p>共<span class="totalnum">{{totalCount}}</span>个角色</p>
					<p class="add" @click="isshow=true"><i class="iconfont icon-plus"></i>新建</p>
				</li>
				<li class="rol-left-li" v-for="(item,index) in allroles" @click="roleEdit(item)"  v-bind:class="{'rol-act':item.id == roleAct}">
					<div class="li_content">
						<div id="">
							<i v-if='item.isStatic' class="iconfont icon-jiaose1"></i>
							<i v-else class="iconfont icon-jiaose2"></i>
							<span class="nametext">					<!--是否启用  isActive-->
								{{item.displayName}}<i v-if="!item.isActive" class="iconfont icon-jinyong"></i>
							</span>
						</div>
						<span v-if="item.remark" class="markes">
							{{item.remark}}
						</span>
					</div>
					<div class="changebtn">
						<i class="iconfont icon-xiala"></i>
						<div class="dropdown">
							<!--是否模板  isStatic -->
							<p @click.stop="isdisable(item,index)" v-if="item.isActive">禁用</p>
							<p @click.stop="isdisable(item,index)" v-else>启用</p>
							<p v-if="!item.isStatic" @click.stop="isedit(item,index)">编辑</p>
							<p v-if="!item.isStatic" @click.stop="isdelete(item,index)">删除</p>
						</div>
					</div>
					<!--<span class="rol-jin" v-if="!item.isActive">已禁用</span>-->
				</li>

			</ul>
			<!--<button class="rol-add" @click="rolAdd()">
				<i class="iconfont icon-plus"></i>新建角色
			</button>-->
		</div>
	</div>
	<div class="rol-right">
		<!--<div class="rol-right-top">
			<div class="rol-right-name">
				{{roledetail.displayName?roledetail.displayName:'新建角色'}}
			</div>
			<div class="rol-right-btn">
			</div>
		</div>
		<div class="rol-form">
			<el-form  :model="formLabel" label-width="100px" :inline="true" :rules="rules" ref="formLabel">
			<div class="wd600">
				<el-form-item label="角色名称：" class="is-required" prop="username">
		            <el-input v-model="formLabel.username" placeholder="请填写角色名称！" size="mini"  class="wd184"></el-input>
		        </el-form-item>
				<el-form-item label="状态：" class='toR'>
		            <el-select v-model="formLabel.state" placeholder="请选择" size="mini" class="wd154">
		              <el-option v-for="item in formLabel.status" :key="item.value" :value="item.isActive" :label="item.value">
		              </el-option>
		            </el-select>
		        </el-form-item>
				<el-form-item label="备注：">
		            <el-input v-model="formLabel.textarea" placeholder="请填写备注！" size="mini"  class="wd500"></el-input>
		        </el-form-item>
			</div>
		</el-form>
		</div>
		<div class="rol-tree clear">
			<div class="rol-tree-name">
				权限：
			</div>
			<div class="rol-tree-box">
                <el-tree
                  :data="roletree"
                  show-checkbox
                  node-key="name"
                  :default-expand-all='true'
                  :default-checked-keys="treeArr"
                  :props="defaultProps"
                  ref="tree"
                 >
                </el-tree>
			</div>
		</div>
		<div class="rol-bottom">
			<el-button type="info" size="small" @click="resetForm('formLabel')">取消</el-button>
            <el-button type="primary" size="small" @click="submitForm('formLabel')">保存</el-button>
		</div>
	
	-->
	<div class="right_top">
		<p><i class="iconfont" :class="roledetail.isStatic?'icon-jiaose1':'icon-jiaose2'"></i>{{roledetail.displayName?roledetail.displayName:'新建角色'}}</p>
		<div class="ismodel" :class="roledetail.isStatic?'edit':'isedit'">
			<p v-if="roledetail.isStatic">该角色为系统设置的角色，权限不可编辑，请选择自定义角色或添加新角色进行编辑！</p>
			<div v-else class="copyuser">
				<p class="aleradyusers">复制已有角色</p>
				<el-select class="modelselets" size="mini" v-model="copyuser" placeholder="请选择" @change="roleEdit2(copyuser)">
			    <el-option
			      v-for="item in allroles"
			      :label="item.displayName"
			      :value="item.id">
			    </el-option>
		  </el-select>
			</div>
		</div>
	</div>
	<div class="right_content">
		<div class="content_top">
				<span>全选</span><el-checkbox v-model="allchose" class='isallchose' @change="isallchose"></el-checkbox>
		</div>
		<div class="content_list" v-for="(item,index) in roletree">
			<div class="first_leave">
					{{item.displayName}}			
			</div>
			<!--<div class="second_level" v-if="item.permissionItems==0">
					<div class="three_level">
								<p class="titletext"></p>
								<div class="checktext">
										<el-checkbox>{{item.displayName}}</el-checkbox>
								</div>	
					</div>
					
			</div>-->
			<div class="second_level">
					<div class="three_level"  v-for="(list,listindex) in item.permissionItems">
								<p v-if="list.permissionItems.length==0" class="titletext"></p>
								<p v-else class="titletext">{{list.displayName}}</p>
								<div class="checktext" v-if="list.permissionItems.length==0">
										<el-checkbox v-model="list.name=='Pages.Index'?true:list.isGranted" :disabled="list.name=='Pages.Index'">{{list.displayName}}</el-checkbox>
								</div>
								<div class="checktext" v-else>
										<el-checkbox v-model="val.isGranted"  v-for="(val,index) in list.permissionItems">{{val.displayName}}</el-checkbox>
								</div>
								<el-checkbox v-if="list.permissionItems.length>1" v-model="list.linechose" class="linechose" @change="linechange(index,listindex)"></el-checkbox>
					</div>
					
				<!--<p class="titletext">{{list.displayName}}</p>
					-->
			</div>			
		</div>
		
	</div>
		<button v-if="!roledetail.isStatic" class='submits' @click="cksubmitbtn">保存</button>
	</div>
	</div>
</div>
</template>

<script>
	import Vue from 'vue'
	export default {
		data(){
			return{
				titles:"新建角色",
				json:{
					roleName:"",
					remark:""
				},
				 rules: {
          roleName: [
            { required: true, message: '请输入角色名称', trigger: 'blur' },
          ]
        },
				treeArr:[],
				formLabel:{
					username:'',
					state:'',
					status : [{
						isActive: true,
						value: '正常'
					}, {
						isActive: false,
						value: '禁用'
					}],
					textarea:''
				},
				defaultProps: {
			        children: 'permissionItems',
			        label: 'displayName'
			    },
				totalCount:'',
				allroles:[],
				isAdd:false, //false为更新，true为添加
				roleAct:0, // 选中样式
				roledetail:{},  // 选中对象
				roletree:[], // 树
				treeSelect:[], //选中的树
//				rules:{
//					username: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
//				},
				copyuser:"",
				allchose:false,
				isshow:false
			}
		},
		mounted(){
			this.userlist();
			//this.loadrole();
		},
		methods:{
				//禁用
				isdisable(val,e){
					let str=!val.isActive?"是否启用？":"是否禁用？"
				        this.$confirm(str, '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).then(() => {
				           let params={
				          	id:val.id
				          }
				          this.post(params, 'services/app/role/UpdateRoleState').then(res=>{
				          	console.log(111)
				          	console.log(res)
				          	this.userlist()
				          })
				        })
				      
				},
				isedit(val){
					console.log(val)
					this.isshow=true
				},
				isdelete(val,e){
					console.log(val)
					this.$confirm('是否删除?', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).then(() => {
				          let params={
				          	id:val.id
				          }
				          this.post(params, 'services/app/role/DeleteRole').then(res=>{
				          	console.log(111)
				          	console.log(res)
				          	this.userlist()
				          })
				        })
				        
				},
			 //得到权限集合
		      treearray(data) {
		        // console.log(data)
		        var treeArr = [];
		        var treeNames = [];
		        data.map(function (item) {
		          if (item.isGranted ) {
		            treeArr.push(item.name)
		            treeNames.push(item.displayName)
		          }
		          if (item.permissionItems.length > 0) { //遍历2级
		            item.permissionItems.map(function (elem) {
		              if (elem.isGranted ) {
		                treeArr.push(elem.name)
		                treeNames.push(elem.displayName)
		              }
		              if (elem.permissionItems.length > 0) { //遍历3级
		                elem.permissionItems.map(function (obj) {
		                  if (obj.isGranted  ) {
		                    treeArr.push(obj.name)
		                    treeNames.push(obj.displayName)
		                  }

		                  if (obj.permissionItems.length > 0) { //遍历4级
		                    obj.permissionItems.map(function (last) {
		                      if (last.isGranted ) {
		                        treeArr.push(last.name)
		                        treeNames.push(last.displayName)
		                      }
		                      //遍历3级
		                    })
		                  }
		                })
		              }
		            })
		          }
		        })
		        return {treeArr,treeNames};
		      },
			// 验证
		    submitForm(formName) {
		      this.$refs[formName].validate((valid) => {
		        if (valid) {
		          if(this.isAdd){
		          	this.saveRole();
		          	this.resetForm('formLabel');
		          }else{
		          	this.saveRole(this.roledetail.id);
		          	this.resetForm('formLabel');
		          }
		          // this.save()
		        } else {
		          console.log('error submit')
		          return false
		        }
		      })
		    },
		    // 重置
		    resetForm(formName) {
		       // this.$refs[formName].resetFields();
		        this.formLabel.state = '';
		        this.formLabel.textarea = '';
		        this.roledetail.displayName = '';
		        this.loadrole();
		        this.treeArr = []
		    },
			// 用户
			userlist() {
				let params = {}
				this.post(params, 'services/app/role/GetAllRoles').then( rs => {
					console.log(rs)
					console.log('用户------------');
					this.allroles = rs.result.items;
					this.totalCount = rs.result.totalCount
					this.roleEdit(this.allroles[0])
				})
			},
			//新建角色
			rolAdd() {
				this.roledetail = {};
				this.isAdd = true;
				this.resetForm('formLabel');
				this.treeArr = []
			},
			rolAdd(){
				
			},
			//进入时默认获取权限
			loadrole(data) {
				let params = {id:data}
				this.post(params, 'services/app/permission/GetAllPermissionTrees').then(rs => {
					console.log(rs)
					if (rs.success) {
						let roletree = rs.result.items[0].permissionItems;
							for(let i=0;i<roletree.length;i++){
							if(roletree[i].permissionItems.length==0){
									roletree[i].permissionItems.push({
											displayName:roletree[i].displayName,
											isGranted:roletree[i].isGranted,
											linechose:roletree[i].linechose,
											name:roletree[i].name,
											parentName:roletree[i].parentName,
											permissionItems:[]
									})
									
							}
							let istrue=true
							for(let j=0;j<roletree[i].permissionItems.length;j++){
								if(roletree[i].permissionItems[j].isGranted==false){
									istrue=false
								}
								roletree[i].permissionItems[j].linechose=istrue
							}
						}
						
						this.roletree = roletree; 
					}
				})
			},
			//全选
			isallchose(){
				console.log(this.roletree)
				if(this.allchose==true){
					for(let i=0;i<this.roletree.length;i++){
						for(let j=0;j<this.roletree[i].permissionItems.length;j++){
							//roletree[i].permissionItems[j].linechose=istrue
							Vue.set(this.roletree[i].permissionItems[j],'linechose',true)
							for(let m=0;m<this.roletree[i].permissionItems[j].permissionItems.length;m++){
								Vue.set(this.roletree[i].permissionItems[j].permissionItems[m],"isGranted",true)
							}
							
						}
					}
				}else{
						for(let i=0;i<this.roletree.length;i++){
						for(let j=0;j<this.roletree[i].permissionItems.length;j++){
								Vue.set(this.roletree[i].permissionItems[j],'linechose',false)
							for(let m=0;m<this.roletree[i].permissionItems[j].permissionItems.length;m++){
								Vue.set(this.roletree[i].permissionItems[j].permissionItems[m],"isGranted",false)
							}
							
						}
					}
					}
				
				
			},
			//行全选
			linechange(e,s){
				//e外下表 s内下边  roletree  roletree[i].permissionItems[j].linechose=istrue
				console.log(this.roletree[e].permissionItems[s].permissionItems)
				if(this.roletree[e].permissionItems[s].linechose==true){
					for(var i=0;i<this.roletree[e].permissionItems[s].permissionItems.length;i++){
						Vue.set(this.roletree[e].permissionItems[s].permissionItems[i],'isGranted',true)
					}
				}else{
					for(var i=0;i<this.roletree[e].permissionItems[s].permissionItems.length;i++){
							Vue.set(this.roletree[e].permissionItems[s].permissionItems[i],'isGranted',false)
					}
				}
			},
			//select
			roleEdit2(data){
					let params = {
					id: data
				}
				this.post(params, 'services/app/role/GetRolePermissionsEdit').then(rs => {
					console.log(rs)
					console.log('树------------');
					if (rs.success) {
						let roletree = rs.result.permissions[0].permissionItems;
						for(let i=0;i<roletree.length;i++){
							if(roletree[i].permissionItems.length==0){
									roletree[i].permissionItems.push({
											displayName:roletree[i].displayName,
											isGranted:roletree[i].isGranted,
											linechose:roletree[i].linechose,
											name:roletree[i].name,
											parentName:roletree[i].parentName,
											permissionItems:[]
									})
									
							}
								let istrue=false
							for(let j=0;j<roletree[i].permissionItems.length;j++){
//								if(roletree[i].permissionItems[j].isGranted==false){
//									istrue=false
//								}
								roletree[i].permissionItems[j].linechose=istrue
							}
						}
						
						this.roletree = roletree;
						console.log("success")
						console.log(roletree)
					}
				})
			},
			
			// 编辑
			roleEdit(data) {
				console.log(data)
				this.formLabel.state = '';
				this.isAdd = false;
				this.roleAct = data.id
				let params = {
					id: data.id
				}
				this.post(params, 'services/app/role/GetRolePermissionsEdit').then(rs => {
					console.log(rs)
					console.log('树------------');
					if (rs.success) {
						let roledetail = rs.result.role
						this.roledetail = roledetail; //角色详情
						
						let roletree = rs.result.permissions[0].permissionItems;
						for(let i=0;i<roletree.length;i++){
							if(roletree[i].permissionItems.length==0){
									roletree[i].permissionItems.push({
											displayName:roletree[i].displayName,
											isGranted:roletree[i].isGranted,
											linechose:roletree[i].linechose,
											name:roletree[i].name,
											parentName:roletree[i].parentName,
											permissionItems:[]
									})
									
							}
							
							
							//let istrue=true
							let istrue=false
							for(let j=0;j<roletree[i].permissionItems.length;j++){
//								if(roletree[i].permissionItems[j].isGranted==false){
//									istrue=false
//								}
								roletree[i].permissionItems[j].linechose=istrue
							}
							
						}
						
						this.roletree = roletree;
						console.log("success")
						console.log(roletree)
						this.formLabel.state = rs.result.role.isActive;
						this.formLabel.username = rs.result.role.displayName;
						this.formLabel.textarea = rs.result.role.remark;

          				this.treeArr = this.treearray(roletree).treeArr
          				console.log(this.treeArr);
					}
				})
			},
			// 得到对应的分配树
			getTree(tree){
			},
			// 树值
		    getCheckedKeys() {
		      this.treeSelect = this.$refs.tree.getCheckedKeys()
		      // console.log('---------/////////----------')
		      // console.log(this.treeSelect)
		    },
			//新增编辑角色
			saveRole(id) {
				let params = {}
				this.getCheckedKeys();
				const that = this;
				if(id){
					params = {
						role: {
							displayName: that.formLabel.username,
							isDefault: false,
							isActive: that.formLabel.state,
							remark: that.formLabel.textarea,
							id: id
						},
						grantedPermissionNames: that.treeSelect
					}
				}else{
					params = {
						role: {
							displayName: that.formLabel.username,
							isDefault: false,
							isActive: that.formLabel.state,
							remark: that.formLabel.textarea
						},
						grantedPermissionNames: that.treeSelect
					}
				}
				// console.log('0000000000000000000-------------');
				// console.log(that.treeSelect);
				that.post(params, 'services/app/role/CreateOrUpdateRole').then(rs => {
					console.log(rs)
					if (rs.success) {
						that.userlist();
					}
				})

			},
			cksubmitbtn(){
			//console.log(this.roledetail)
				let arr=[];
			
				for(let i=0;i<this.roletree.length;i++){
					for(let j=0;j<this.roletree[i].permissionItems.length;j++){
						if(this.roletree[i].permissionItems[j].permissionItems.length==0){
							if(this.roletree[i].permissionItems[j].isGranted==true){
								arr.push(
									this.roletree[i].permissionItems[j].name
								)
							}
						}else{
							for(var m=0;m<this.roletree[i].permissionItems[j].permissionItems.length;m++){
								if(this.roletree[i].permissionItems[j].permissionItems[m].isGranted==true){
									arr.push(
										this.roletree[i].permissionItems[j].permissionItems[m].name
									)
								}
							}
						}
					}
				}
				console.log("cunzai")
				console.log(arr)
				let params={
					id:this.roledetail.id,
					grantedPermissionNames:arr
				}
				this.post(params,"services/app/role/UpdateRolePermissions").then(res=>{
					console.log(res)
					this.$notify({
	          title: '成功',
	          message: '保存成功',
	          type: 'success'
	        });
				})
			},
			addbtn(formName){
				 this.$refs[formName].validate((valid) => {
          if (valid) {
           	this.post(this.json, 'services/app/role/CreateRole').then(rs => {
							console.log(rs)
							this.roleAct=rs.result
							let obj={
								id:rs.result
							}
							this.userlist()
							this.roleEdit(obj)
							this.isshow=false
						})
          } else {
            console.log('error submit!!');
            return false;
          }
        });
			}
		}


	}
</script>

<style lang="scss" scoped>
.wd500{
	width:500px;
}
.wd154{
	width: 154px;
}
.wd184{
	width:184px;
}
.wd600{
	width:610px;
}
.toR{
	float:right
}
.el-form-item.is-required .el-form-item__label:before{
    content: "*";
    color: #f56c6c;
    margin-right: 4px;
  }
	.rol-cent{
	
		    overflow: hidden;
		    // height: 100%;
		    // border-radius: 3px;
		    position: relative;
		    // border: 1px solid #ddd;
			padding-left: 260px;
			//margin-bottom: 20px;
			// overflow-y: auto
		}
		.rol-left{
			width: 260px;
		    height: 100%;
		    background-color: #f6f6f6;
		    position: absolute;
		    top: 0;
		    left: 0;
		    overflow-y: auto;
		    .rol-left-one{
		    	width: 260px;
				 	height:40px;
					 color:#555555;
					 padding:0 15px;
				 	font-size: 13px;
				 	border-bottom: 1px solid #ddd;
					 cursor: pointer;
				 	position: relative;
				 	display:flex;
				 	justify-content: space-between;
				 	align-items: center;
				 	.add{
				 		font-size: 14px;
						color: #027DCA;
						i{
							margin-right:8px;
						}
				 	}
		    }
			.rol-left-list{
				ul{padding:0;margin:0;}
				.rol-left-li{
					width: 260px;
				 height:60px;
				 color:#555555;
				 padding:0 0 0 15px;
				 font-size: 13px;
				 border-bottom: 1px solid #ddd;
				 cursor: pointer;
				 position: relative;
				 display:flex;
				 justify-content: flex-start;
				 align-items:center;
				 border-left:4px solid transparent;
				 i{
				 	font-size:13px;
				 }
				 	.icon-jinyong{
						font-size:10px;
						margin-left:21.5px;
						color:#AEAEAE;;
					}
				 .li_content{
				 	display:flex;
				 	flex-direction: column;
				 	align-items: flex-start;
				 	justify-content: space-around;
				 	div{
				 		display:flex;
				 		justify-content: flex-start;
				 		align-items: center;
				 		margin-bottom:5px;
				 		i{
				 			color:#999;
				 		}
				 	}
				 	span{
				 		display:block;
				 			height:18px;
				 			color: #999999;
				 			margin-left:11px;
				 			width:150px;
				 			overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							
				 	}
				 	.markes{
				 		text-indent:12px;
				 		font-size:12px;
				 	}
				 	.nametext{
				 		color: #333333;
				 		font-size:13px;
				 		display:flex;
				 		align-items: center;
						 width:132px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;
				 		
				 	}
				 }
				 .rol-jin{
					 background: #ccc;
					 color:#333;
					 display: inline-block;
					 border-radius: 5px;
					 height: 18px;
					 line-height: 18px;
					 font-size: 12px;
					 padding:0 2px;
					 position: absolute;
					 right:30px;
					 top:10px;
				 }
				 .i{
					 font-size: 20px;
				 }
				 .rol-num{color:#333;
				 }
				}
				.rol-left-li:first-child{
					height:40px;
					line-height:40px;
				}
				.rol-act{
					background: #FFFFFF;
					color:#ee6000;
					box-sizing: border-box;
					border-left:4px solid #FF7819;
					.li_content{
						div{
							i{
							color:#ee6000;
						}
						}
					}
					.li_content{
						.nametext{
						color:#ee6000;
					}
					}
					
				}
				.ddd{
					background: #000
				}
			}
		}
		/*.rol-right{
			// width: 100%;
			// height: 100%;
			// // min-width: 915px;
			// min-width: 800px;
			// background: #fff;
			// border-top:1px solid #ddd;
			// border-right:1px solid #ddd;
			// border-bottom :1px solid #ddd;
			//float: left;
		    padding-bottom: 50px;
		    //width: 100%;
		    background: #fff;
		    border-left: 1px solid #ddd;
		    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
		    position: relative;
		    z-index: 2;
			.rol-right-top{
				width: 100%;
				height: 60px;
				border-bottom: 1px solid #e7e7e7;
				padding:0 35px;
				position: relative;
				.rol-right-name{
					padding:15px 0 ;
					color: #555;
					font-size: 18px;
				}
				.rol-right-btn{
					position: absolute;
					right:35px;
					top:14px;


				}
			}
			.rol-form{
				padding:35px 35px 0 35px;
				.rol-row{
					display: flex;
					width: 100%;
					.rol-col{
						flex:1;
						height: 28px;
						margin-bottom: 21px;
						.rol-label{
							width:85px;
							text-align: right;
							font-size: 13px;
							color: #666;
							font-weight: normal;
							line-height: 28px;
							margin:0;
							float: left;
						}
						.rol-input{
							width:250px;
							float: left;
						}
						.rol-remark{
						}
					}
				}
			}
			.rol-tree{
				padding-left:35px;
				.rol-tree-name{
					width:100px;
				    text-align: right;
				    float: left;
				    font-size: 14px;
				    color: #606266;
				    padding: 0 12px 0 0;
				    -webkit-box-sizing: border-box;
				    box-sizing: border-box;
				}
				.uitl-tree{
					width: 500px;
					float: left;
					padding:0 30px;
					margin-top:-10px;
				}
				.rol-tree-box{
					height: 400px;
					overflow-y: auto;
					padding: 30px;
					margin-bottom: 30px;
					border: 1px solid #ddd;
					width: 500px;
					border-radius:5px;
				}
			}
			.rol-bottom{
				padding-left:135px;
				.button-default{
					margin-right: 40px!important;
				}
			}
		}*/
		.rol-add{
			margin:10px 15px;
			width:200px;
			height:30px;
			text-align: center;
			color:#ee6000;
			background: none;
			border:none;
			border:1px dashed #ee6000;
			border-radius: 5px;
			i{
				color:#ee6000;
			}
		}
	.totalnum{
				 color: red;
			}
			.rol-left-li:not(:first-of-type):hover{
				background: #FFFFFF;
			}
				.rol-left-li:not(:first-of-type):hover .changebtn{
				display:block;
			}
			.changebtn{
				position:relative;
				width:59px;
				height:100%;
				margin-left:10px;
				line-height:59px;
				text-align:center;
				display:none;
				.dropdown{
					display:none;
					position:absolute;
					width:100%;
					min-height:31px;
					border: 1px solid rgba(0,0,0,0.10);
					box-shadow: 0 5px 7px 0 rgba(0,0,0,0.20);
					border-radius: 5px;
					background: #FFFFFF;
					left:0;
					top:44px;
					z-index:33;
					p{
						text-align:center;
						font-size: 13px;
						color: #666666;
						line-height:31px;
						margin:0;
						padding:0;
					}
					p:not(:last-of-type){
						border-bottom: 1px solid #DDDDDD;
					}
				}
			}
			.changebtn:hover .dropdown{
				display:block;
			}
			.dropdown>p:hover{
				background-color: #ecf5ff;
			}
		
			.rol-right{
				width: 100%;
				height: 100%;
				 min-width: 915px;
				min-width: 800px;
				background: #fff;
				 border-top:1px solid #ddd;
				 border-right:1px solid #ddd;
				 border-bottom :1px solid #ddd;
					float: left;
			    padding-bottom: 50px;
			    width: 100%;
			    background: #fff;
			    border-left: 1px solid #ddd;
			   			    position: relative;
			    padding-left:21px;
			    padding-right:19px;
			    z-index: 2;
			    .right_top{
			    	width:100%;
			    	height:85px;
			    	padding-top:1px;
			    	margin-bottom:15px;
			    	p{
			    		width:100%;
			    		height:25px;
			    		line-height:25px;
			    		margin:26px 0 15px 0;
			    		font-size: 18px;
							color: #333333;
							i{
							
								font-size:16px;
								color:#FF7819;
								margin-right:16px;
							}
			    	}
			    	.edit{
			    			width:100%;
				    		height:28px;
				    		display:flex;
				    		align-items: center;
			    			justify-content: flex-start;
			    		}
			    		.isedit{
			    			width:100%;
				    		height:28px;
				    		display:flex;
				    		align-items: center;
			    			justify-content: flex-end;
			    		}
			    		.ismodel{
			    			
			    			p{
			    				width:500px;
			    				font-size: 12px;
									color: #F56C6C;
									margin:0;
			    			}
			    			 .copyuser{
						    	width:250px;
						    	height:100%;
						    	display:flex;
						    	justify-content: space-around;
						    	align-items: center;
						    	.aleradyusers{
						    		width:91px;
						    		display:flex;
						    		align-items: center;
						    		margin:0;
						    		font-size: 13px;
										color: #666666;
						    	}
						    	.modelselets{
						    		width:150px;
						    		font-size: 13px;
										color: #333333;
						    	}
						    }
			    		}
			    }
		    }
		    .right_content{
		    	margin-top:15px;
		    	border: 1px solid #D9D9D9;
		    	 .content_top{
			    	width:100%;
			    	min-height:45px;
			    	display:flex;
			    	justify-content: flex-end;
			    	align-items: center;
			    	span{
			    		margin-right:5px;
			    		color:#CBCBCB;;
			    	}
			    	.isallchose{
			    		margin-right:18px;
			    	}
			    }
			    .content_list{
			    		width:100%;
			    		min-height:45px;
			    		display:flex;
			    		justify-content: flex-start;
			    		font-size: 13px;
							color: #666666;
			    		.first_leave{
			    			width:130px;
			    			min-height:45px;
			    			border-right:1px solid #D9D9D9;
			    			display:flex;
			    			justify-content: center;
			    			align-items: center;
			    			border-top:1px solid #D9D9D9;
			    		
			    		}
			    		.second_level{
			    				display:flex;
			    				flex-direction: column;
			    				justify-content: flex-start;
			 						align-items: flex-start;
			 						width:calc(100% - 130px);
			 						
			 						
			    				.three_level{
			    					width:100%;
			    					min-height:45px;
			    					display:flex;
			    					justify-content: flex-start;
										border-top:1px solid #D9D9D9;
										align-items: center;
											position:relative;
			    			.linechose{
			 							position:absolute;
			 							top:0;
			 							right:0;
			 							width:50px;
			 							height:100%;
			 							display:flex;
			 							justify-content: center;
			 							align-items: center;
			 							margin-right:0;
			 						}
			    					.titletext{
				    					width:132px;
				    					height:100%;
				    					text-align:center;
				    					
				    				}
				    				.checktext{
				    					width:575px;
				    					height:45px;
				    					display:flex;
				    					justify-content: flex-start;
				    					align-items: center;
				    					flex-wrap: wrap;
				    					margin-right:60px;
				    					margin-left:20px;
				    					
				    				}
			    				}
			    		}
			    }
		    }
		   .submits{
		   	display:block;
		   	width:100px;
		   	height:32px;
		   	background: #FF7819;
				border: 1px solid #EE6000;
				border-radius: 5px;
				margin:49px auto 0;
				font-size: 14px;
				color: #FFFFFF;
				outline:none;
		   }
		   .icon-xiala{
		   	
				border: 1px solid #999999;
				color:#999999;
				border-radius: 3px;
		   }
		   .subbtn{
		   	display:flex;
		   	justify-content: center;
		   	align-items: center;
		   }
		   .subbtn button{
		   	margin:0;
		   }
</style>